<template>
    <div id="app">
        <a-layout id="components-layout-demo-side" style="min-height: 100vh">
            <a-layout-header :style="{ position: 'fixed', zIndex: 999, width: '100%' }">
                <span class="factory-title">妙笔移动建站平台</span>
                <div class="profile">
                    <div v-if="this.$store.state.loginUser !== null">
                        <span>
                            欢迎您, {{ this.$store.state.loginUser.tel }}
                        </span>
                        <a-button type="link" size="small">退出登录</a-button>
                    </div>
                    <div v-else>
                        <a-button type="link" @click="$store.commit('showLoginModal',true)" size="small">登录</a-button>
                    </div>
                </div>
                <a-menu theme="dark" :default-selected-keys="selectedItemName" mode="horizontal" :style="{ lineHeight: '64px', float: 'left' }">
                    <a-menu-item key="/" @click="navigateTo('/')">
                        <a-icon type="desktop" />
                        <span>网站制作</span>
                    </a-menu-item>
                    <a-menu-item v-if="this.$store.state.loginUser !== null" key="web-list" @click="navigateTo('web-list')">
                        <a-icon type="pie-chart" />
                        <span>网站列表</span>
                    </a-menu-item>
                </a-menu>
            </a-layout-header>
            <a-layout :style="{marginTop : '64px'}">
                <router-view></router-view>
                <a-layout-footer :style="{ position: 'fixed', bottom: 0, width: '100%', zIndex: 999, height: '40px', padding: 0, background: '#001529', color: 'white'}">
                    <p style="padding: 10px;text-align: center;">技术支持 QQ: 2301902702</p>
                </a-layout-footer>
            </a-layout>
        </a-layout>
        <login :visible="$store.state.loginModalVisible" @finished="$store.commit('showLoginModal',false)"></login>
    </div>
</template>
<style>
div.profile {
    display: block;
    float: right;
    color: white;
}
span.factory-title{
    color: white;
    line-height: 60px;
    float: left;
    margin-right: 30px;
}
</style>
<script>
import Login from './views/Login'
export default {
    components: {
        Login
    },
    data() {
        return {
            collapsed: false,
        };
    },
    methods: {
        navigateTo(name) {
            if (this.$router.currentRoute.name === name) {
                return
            }
            this.$router.push({ name: name })
        }
    },
    computed: {
        selectedItemName() {
            console.log(this.$router.currentRoute.name + '')
            if (this.$router.currentRoute.name === null) {
                return ['/']
            }
            return [this.$router.currentRoute.name]
        }
    }
};
</script>
<style>
#components-layout-demo-side .logo {
    height: 32px;
    background: rgba(255, 255, 255, 0.2);
    margin: 16px;
}
</style>